<template>
  <div>
    <cityHeader></cityHeader>
    <citySearch :cities="cities"></citySearch>
    <cityList :cities="cities" :abc='abc' :hotCities="hotCities" :letter='letter'></cityList>
    <alphabet :cities="cities" @change="handleLetterChange"></alphabet>
  </div>
</template>

<script>
import axios from "axios";
import cityHeader from "./citySelect/cityHeader";
import citySearch from "./citySelect/citySearch";
import cityList from "./citySelect/cityList";
import alphabet from "./citySelect/alphabet";
export default {
  // 组件名称
  name: "demo", // 组件参数 接收来自父组件的数据
  props: [],
  components: {
    cityHeader,
    citySearch,
    cityList,
    alphabet
  },
  data() {
    return {
      cities: {},
      hotCities: [],
      letter: "",
      abc:[]
    };
  },
  computewd: {},
  watch: {},
  methods: {
    getAllMsg() {
      axios.get("/static/mock/city.json").then(res => {
        // console.log(res.data.data);
        this.cities = res.data.data.cities;
        this.hotCities = res.data.data.hotCities;
        // console.log(this.cities);
      });
    },
    handleLetterChange(val) {
      console.log(val)
      this.letter = val;
      // this.abc = val.abc
      // console.log(this.letter)
    }
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    this.getAllMsg();
  }
};
</script> 
<style scoped>
</style>
